<script setup lang="tsx">
import { useTable } from '@zm-pkg/ui'
import { initHttp, Ahttp } from '@zm-pkg/core'
// initHttp({ BaseURL: 'http://localhost:8082/api-auth' })
// Ahttp.post({
//   url: '/login'
// })
import SvgVue from '@assets/vue.svg?component'
import editSvg from '@assets/edit.svg?component'

const loading = ref(true)
const dataSource = ref([])

setTimeout(() => {
  for(let i = 0; i < 1500; i++) {
    dataSource.value.push({
      id: i + 1,
      index: i + 1,
      baseColumn1: Math.round(Math.random()),
      baseColumn2: Math.ceil(Math.random() * 2),
      baseColumn3: new Date().getTime() + (1000 * 60 * 60 * 24) * Math.ceil(Math.random() * 30),
      baseColumn4: Math.ceil(Math.random() * 2000000),
      baseColumn5: (Math.round(Math.random() * 100)) / 100,
      baseColumn6: '第六列',
      baseColumn7: '第七列',
      baseColumn8: '第八列',
      baseColumn9: '第九列'
    })
  }
  loading.value = false

}, 1000)
const [registerTable, {}] = useTable({
  loading,
  expandActions: true,
  showBtnText: false,
  showIndexColumn: true,
  // canResize: false,
  // virtual: true,
  // columnCode: 'TEST',
  rowClassName: (row, index) => {
    return row.id === 2 && 'redRow'
  },
  // size: 'large',
  // pagination: true,
  columns: [
    { title: '类字典', dataIndex: 'baseColumn2',  sorter: true },
    { title: '日期', dataIndex: 'baseColumn3', sorter: true },
    { title: '数字', dataIndex: 'baseColumn4',  align: 'right' },
    { title: '百分比', dataIndex: 'baseColumn5',  align: 'right' },
    { title: 'tsx模板', dataIndex: 'baseColumn6', render: <i class="i ic:baseline-duo text-xl flex text-red-600"></i> },
    { title: '函数', dataIndex: 'baseColumn7', render: (record, index, text) => {
        const myLove = [ '香烟', '美酒', '香蕉', '苹果', '橘子' ]

        return (<span>{ myLove[Math.floor( Math.random() * 3 )] }</span>)
      } },
    { title: 'vue api函数', dataIndex: 'baseColumn8', render: () => computed(() => 123) },
    { title: '使用其它组件', dataIndex: 'baseColumn9', render: () => defineComponent({
        name: 'tesxt',
        setup(props, { attrs }) {
          return () => {
            return (<span>这是测试</span>)
          }
        }
      })
    },
  ],
  // operations: false
  // operations: [
  //   { label: 'button1', icon: 'mdi:text-box-edit-outline' },
  //   { label: 'button2', icon: 'mdi:text-box-edit-outline' },
  //   { label: 'button3', icon: 'mdi:text-box-edit-outline' },
  //   { label: 'button4', icon: 'mdi:text-box-edit-outline' },
  // ],
  operations: {
    // expand: true,
    expandNum: 2,
    btns: [
      { label: 'button1', icon: 'mdi:text-box-edit-outline', iconNode: editSvg },
      { label: 'button2', icon: 'mdi:text-box-edit-outline' },
      { label: 'button3', icon: 'mdi:text-box-edit-outline' },
      { label: 'button4', icon: 'mdi:text-box-edit-outline' },
    ]
  },
  dataSource
})
</script>

<template>
  <div class="p-3 h-full flex w-full dt-layout-content">
    <DtTable @register="registerTable">
      <!--    <template #bodyCell>-->
      <!--      这是内容-->
      <!--    </template>-->

      <template #headerTop>
        <div class="font-bold">主要演示table中的列宽度拖拽、列展示、下载、全屏、操作按钮以及render函数使用示例!</div>
      </template>
    </DtTable>
  </div>
</template>

<style scoped>

</style>